<!-- 多文件上传 -->
<template>
  <div>
    <el-upload ref="upload" :action="uploadUrl" list-type="picture-card" :file-list="fileList"
      :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :multiple="true" :on-success="handle_success"
      :limit="maxCount" :on-exceed="handleExceed">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "multiUpload",
  props: {
    //图片属性数组
    value: Array,
    fileList: Array,
  },
  data() {
    return {
      uploadList: [],
      uploadUrl: 'http://localhost:88/api/oss/upload',
      maxCount: 20,
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {

    handle_success(res, file, fileList) {

      console.log("上传成功", res, file);

      this.uploadList.push(res.data);
      this.emitInput(this.uploadList);
    },
    handleExceed(files, fileList) {
      this.$message({
        message: "最多只能上传" + this.maxCount + "张图片",
        type: "warning",
        duration: 1000
      });
    },

    handleRemove(file, fileList) {
      this.$http({
        url: this.$http.adornUrl('/oss/del?fileName=' + file.name.split('/').pop()),
        method: 'get',

      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })



      console.log(file, fileList);
      this.uploadList = [];
      fileList.map(element => {
        this.uploadList.push(element.url)
      })
      this.emitInput(this.uploadList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },


    emitInput(fileList) {
      // console.log("emitInput", fileList);
      this.$emit("input", fileList);
    },

    clearFiles() {
      this.$refs.upload.clearFiles();
    },


  },



}
</script>
